<template>
    <div class="app">
        <my-navbar title="订单消息"></my-navbar>
        <div class="message_box">
            <list>
                <cell v-for="item in orders" v-if="orders.length>0">
                    <div class="message_item" @click="orderClick(item.msgContent.id)">
                        <div class="message_time">
                            <text class="message_time_title">{{item.sendDate}}</text>
                        </div>
                        <div class="message_item_box">
                            <div class="box_head">
                                <text class="message_box_tittle">{{item.msgTitle}}</text>
                                <text class="infoIcon">&#xe61f;</text>
                            </div>
                            <div class="box_body">
                                <div class="photo_content">
                                    <image style="width:150px;height:150px"
                                           :src="item.msgContent.itemList[0].thumbnail"></image>
                                </div>
                                <div class="box_body_message">
                                    <text class="message_text"> {{item.msgContent.title}}</text>
                                    <text class="message_sn">订单编号:{{item.msgContent.sn}}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </cell>
            </list>
        </div>
    </div>
</template>

<script>
    import {list, markAsRead, unReadCount, update} from "../../../api/msgPush"
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    export default {
        data() {
            return {
                msgKey: 'msg-order',
                orders: []
            }
        },
        created() {
            this.loadMsgList()
            this.initIconFont()
        },
        components: {
            myNavbar
        },
        methods: {
            loadMsgList() {
                list({
                        msgKey: this.msgKey,
                        mchId: this.getGlobalData().mchId,
                    }
                ).then(res => {
                    res.data.data.forEach(item => {
                        item.sendDate=this.formatTime(item.sendDate)
                        item.msgContent = JSON.parse(item.msgContent)
                        if (item.readStatus == 2) {
                            item.readStatus = 1
                        }
                    })
                    this.orders = res.data.data
                    markAsRead({
                        msgKey:this.msgKey,
                    }).then(res=>{

                    })
                })
            },
            orderClick(id){
                var _this = this
                eeui.openPage({
                        pageName: 'componentsOrder',
                        params: id,
                        url: 'root://pages/order/orderDetails.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {
                        if (result.status == 'stop')  {
                            storage.getItem('orderShipping', event => {
                                if (event.data == 'true'){
                                    _this.refreshClick()
                                }
                            })
                            storage.removeItem('orderShipping', event => {

                            })
                        }
                    }
                );
            }

        }
    }
</script>

<style scoped>
    .app {
        flex: 1
    }

    .app,
    body {
        background-color: #e6e6e6;
    }

    .message_item {
        display: flex;
        width: 700px;
        flex-direction: column;

        margin-top: 38px;
    }

    .message_time {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;

    }

    .message_time_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.3;
    }

    .message_box {

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box_head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .message_box_tittle {
        font-size: 28px;
        font-weight: 400;
        justify-content: center;
        align-items: center;
        display: flex;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .circular {
        width: 10px;
        height: 10px;
        background: rgba(231, 91, 83, 1);
        border: 2px solid rgba(231, 91, 83, 1);
        border-radius: 50%;
        margin-left: 16px;
    }

    .infoIcon {
        color: rgba(42, 42, 54, 0.3);
        font-family: iconfont2;
        font-size: 22px;
    }

    .box_body {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }

    .photo_content {
        width: 150px;
        height: 150px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
    }

    .box_body_message {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
    }

    .message_text {
        width: 300px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        lines:2;
        text-overflow: ellipsis;
    }

    .message_sn {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-top: 20px;
    }

    .message_item_box {
        background-color: white;
        border-radius: 10px;
        margin-top: 30px;
        padding: 30px;
        box-sizing: border-box;
    }

</style>
